<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath}/back/jquery/jquery-1.8.3.js"
	type="text/javascript"></script>
<style type="text/css">
	table{
		width:1200px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top:50px;
		border-collapse: collapse;
	}
	tr{ height: 50px;}
	tr th{background-color: lightgreen}
	h2{	margin-top:15%;		text-align: center;	}
body
{
 margin:0; padding:0; font-size:15px; font-family:"微软雅黑";
}
a:link {
 color:#3f3f3f; text-decoration: none;
}
a:visited {
 text-decoration:none; color: #3f3f3f;
}
a:hover {
 text-decoration:none; color: #f46662;
}
a:active {
 text-decoration: none; color:#f46662;
}
#main
{
 width:100%; background-color:#fafafa; border-top:#d1d1d1 1px solid; margin-top:10px; border-bottom:#32a1e3 4px solid; overflow:hidden;
}
#menu
{
 width:900px; margin:0 auto;
}
.m1
{
float:left; width:100px; text-align:center; color:#3a3a3a;  border-right:#bfbfbf 1px dotted;  padding:10px; padding-top:13px; cursor:pointer; background-repeat:no-repeat; background-position:10px 12px;
}

</style>
<script type="text/javascript">
$(function(){

$(".m1").mouseover(function(){
 $(this).css("background-image","url('/imagesforcode/201208/bg.png')");
}
).mouseout(function(){
$(this).css("background-image","none");
});
$("#wzf").click(function(){
		$("#both").css("display","none");
		$("#yizf").css("display","none");
		$("#wancheng").css("display","none");
		$("#tuipiao").css("display","none");
		$("#weizf").css("display","block");
});
$("#yzf").click(function(){
	$("#both").css("display","none");
	$("#weizf").css("display","none");
	$("#wancheng").css("display","none");
	$("#tuipiao").css("display","none");
	$("#yizf").css("display","block");
});
$("#ywc").click(function(){
	$("#both").css("display","none");
	$("#yizf").css("display","none");
	$("#wancheng").css("display","block");
	$("#tuipiao").css("display","none");
	$("#weizf").css("display","none");
});
$("#tp").click(function(){
	$("#both").css("display","none");
	$("#yizf").css("display","none");
	$("#wancheng").css("display","none");
	$("#tuipiao").css("display","block");
	$("#weizf").css("display","none");
});
$("#all").click(function(){
	$("#both").css("display","block");
	$("#yizf").css("display","none");
	$("#wancheng").css("display","none");
	$("#tuipiao").css("display","none");
	$("#weizf").css("display","none");
});
$(".out").click(function(){
	var id=$(this).prev().val();
	
$.ajax({  
        type:"POST",  
        url:"/VipChangeStateServlet",  
        data:{  
              "id":id ,"flag":"out"       	
        },  
        dataType:"json",  
        success:function (data) {  
        	
        	if(data==1){
        		alert("出票成功");
        		window.location.reload();
        	}else{
        		alert("出票失败")
        	}
        },
        error:function(){
        	alert(2)
        }
    }) 
});
 $(".tui").click(function(){
	var id=$(this).prev().prev().val();
	var money=$(this).parent().prev().prev().html();
	var bmoney=money*0.8
$.ajax({  
        type:"POST",  
        url:"/VipChangeStateServlet",  
        data:{  
              "id":id ,"flag":"tui"       	
        },  
        dataType:"json",  
        success:function (data) {  
        	if(data==1){
        		alert("退票成功，退还您付款账户"+bmoney+"元！");
        		window.location.reload();
        	}else{
        		alert("修改失败")
        	}
        },
        error:function(){
        	alert(2)
        }
    }) 
}); 
$("tr:even").css("background","lightblue")
});
</script>
</head>

<body>
	<div id="main">
		<div id="menu">
			<span id="all" class="m1"><a href="#">用户订单</a></span>
			<span id="wzf" class="m1"><a href="#">未支付订单</a></span>
			<span id="yzf" class="m1"><a href="#">已支付订单</a></span>
			<span id="ywc" class="m1"><a href="#">已完成订单</a></span>
			<span id="tp" class="m1"><a href="#">退票订单</a></span>
		</div>
	</div>
<c:choose>
<c:when test="${!empty list }">
<div id="both">
	<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
		</tr>
		<c:forEach items="${list }" var="l">		
			<tr>		
			<td>1213123132132131</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<c:choose>
				<c:when test="${l.state eq '0' }">
				<td>未支付</td>
				</c:when>
				<c:otherwise>
					<c:choose>
						<c:when test="${l.state eq '1'}">
							<td>已支付</td>							
						</c:when>
						<c:otherwise>
							<c:choose>
								<c:when test="${l.state eq '2'}">
								<td>订单已完成</td>								
								</c:when>
								<c:otherwise>									
									<td>退票</td>									
								</c:otherwise>
							</c:choose>
						</c:otherwise>
					</c:choose>
				</c:otherwise>		
			</c:choose>
		</tr>
	</c:forEach>
	</table>
	</div>
	<div id="weizf" style="display:none">
	<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${list }" var="l">
			<c:choose>
				<c:when test="${l.state eq '0' }">
			<tr>		
			<td>1213123132132131</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>未支付</td>
			<td><a href="#">去付款</a></td>
			</tr>
			</c:when>
			<%-- <c:otherwise>
			<h2>您还沒有未付款订单信息</h2>
			</c:otherwise>	 --%>
			</c:choose>
	</c:forEach>
	</table>
	</div>
	<div id="yizf" style="display:none">
			<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${list }" var="l">
			<c:choose>
				<c:when test="${l.state eq '1' }">
			<tr>
	
			<td>1213123132132131</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>已支付</td>	
			<td><input type="hidden"  value="${l.oid }"><a href="#" class="out"> 出票</a>  || <a href="#" class="tui"> 退票</a></td>
			</tr>
			</c:when>
			<%-- <c:otherwise>				
					<c:if test="${l.state ne '0' && l.state ne '2'  }">
						<h2>您还沒有已經支付的订单信息</h2>
					</c:if>							
			</c:otherwise>  --%>
			</c:choose>
	</c:forEach>
	</table>
	</div>
	<div id="wancheng" style="display:none">
			<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
		</tr>
		<c:forEach items="${list }" var="l">
			<c:choose>
				<c:when test="${l.state eq '2' }">
			<tr>		
			<td>1213123132132131</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>已完成</td>
			</tr>
			</c:when>
			<%-- <c:otherwise>
			<h2>您还沒有已經完成的订单信息</h2>
			</c:otherwise> --%>	
			</c:choose>
	</c:forEach>
	</table>
	</div>
	<div id="tuipiao" style="display:none">
			<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
		</tr>
		<c:forEach items="${list }" var="l">
			<c:choose>
				<c:when test="${l.state eq '3' }">
			<tr>		
			<td>1213123132132131</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>已退票</td>				
			</tr>
			</c:when>	
			<%-- <c:otherwise>
			<h2>您还沒有退票的订单信息</h2>
			</c:otherwise> --%>
			</c:choose>
	</c:forEach>
	</table>
	</div>
</c:when>
<c:otherwise>
	<h2>您还没有订单信息</h2>
</c:otherwise>
</c:choose>
</body>
</html>